<template>
  <div>
    <s-title text="公共服务"></s-title>
    <div class="publicServicecon">
      <div class="ylzx">
        <div class="title">养老中心</div>
        <div class="t-desc">
          <div class="t-desc-bg"></div>
          <div
            class="t-desc-item"
            v-for="(item, index) in process"
            :key="index"
          >
            <div class="rank">{{ index + 1 }}</div>
            <div class="info">
              <div class="value">{{ item.value }}</div>
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="sqfw">
        <div class="title">社区事务受理服务（昨天）</div>
        <div class="sqfwcon">
          <div class="sqfwcon-item" v-for="(item, index) in sqfw" :key="index">
            <img :src="item.icon" />
            <div class="value">{{ item.value }}</div>
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
// import { bizCount } from "../../../utils/api";
export default {
  name: "publicService",
  components: {
    sTitle,
  },
  data() {
    return {
      process: [
        // {
        //   name: "老龄化指数",
        //   value: "--",
        // },
        {
          name: "养老机构",
          value: 26,
        },
        {
          name: "老年活动室",
          value: "17",
        },
        {
          name: "社区养老 ",
          value: "--",
        },
        {
          name: "机构养老",
          value: "14",
        },
        {
          name: "长者照护之家",
          value: "1",
        },
        {
          name: "日间服务中心",
          value: "3",
        },
        {
          name: "助餐点",
          value: "4",
        },
        {
          name: "居家养老",
          value: "40",
        },
      ],
      sqfw: [
        {
          name: "政务服务业务量",
          value: "80",
          icon: require("@/assets/image/right2/sqfwconitem1.png"),
        },
        {
          name: "网上受理量",
          value: "0",
          icon: require("@/assets/image/right2/sqfwconitem2.png"),
        },
        {
          name: "窗口受理量",
          value: "80",
          icon: require("@/assets/image/right2/sqfwconitem3.png"),
        },
      ],
    };
  },
  mounted() {
    const params = {
      streetname : "豫园街道"
    }
    // bizCount(JSON.stringify(params)).then((res) => {
    //   if(res.data.code === 200 && res.data.data.result.length>0){
    //     this.sqfw[0].value = res.data.data.result[0].acceptnumber;
    //     this.sqfw[1].value = res.data.data.result[0].ywtbnumber;
    //     this.sqfw[2].value = res.data.data.result[0].cknumber;
    //   }

    // })
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.publicServicecon {
  width: 100%;
  height: 300px;
  color: #fff;
}

.ylzx .title {
  width: 100%;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: url(~@/assets/image/right2/yltitle.png);
  text-indent: 50px;
  font-size: 23px;
  font-weight: bold;
  line-height: 20px;
}

.sqfw {
  width: 100%;
  height: 200px;
  margin-top: 10px;
}
.sqfw .title {
  width: 100%;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: url(~@/assets/image/right2/sqfwtitle.png);
  text-indent: 50px;
  font-size: 23px;
  font-weight: bold;
  line-height: 20px;
}

.t-desc {
  width: 100%;
  height: 250px;
  position: relative;
}
.t-desc-bg {
  width: 150px;
  height: 150px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: url(~@/assets/image/right2/t-desc-bg.png);
  position: absolute;
  left: 220px;
  top: 50px;
}
.t-desc-item {
  position: absolute;
}
.t-desc-item .rank {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-size: 18px;
  text-align: center;
  line-height: 35px;
  float: left;
  margin-top: -10px;
    position: absolute;
    z-index: 2;
}
.t-desc-item:nth-child(1) {
  left: 20px;
  top: 25px;
}
.t-desc-item:nth-child(2) {
left: 45px;
    top: 35px;
}
.t-desc-item:nth-child(3) {
  left: 115px;
  top: 110px;
}
.t-desc-item:nth-child(4) {
  left: 50px;
  top: 185px;
}
.t-desc-item:nth-child(5) {
  left: 220px;
  top: 185px;
}
.t-desc-item:nth-child(6) {
 left: 240px;
    top: 35px;
}
.t-desc-item:nth-child(7) {
left: 430px;
    top: 35px;
}
.t-desc-item:nth-child(8) {
  left: 440px;
  top: 120px;
}
.t-desc-item:nth-child(9) {
  left: 390px;
  top: 185px;
}
.t-desc-item:nth-child(1) .rank {
  background: rgba(193, 152, 35, 1);
}
.t-desc-item:nth-child(2) .rank {
  background: rgba(7, 223, 255, 1);
}
.t-desc-item:nth-child(3) .rank {
  background: rgba(202, 118, 49, 1);
}
.t-desc-item:nth-child(4) .rank {
  background: rgba(19, 153, 224, 1);
}
.t-desc-item:nth-child(5) .rank {
  background: rgba(23, 202, 197, 1);
}
.t-desc-item:nth-child(6) .rank {
  background: rgba(152, 120, 94, 1);
}
.t-desc-item:nth-child(7) .rank {
  background: rgba(133, 152, 182, 1);
}
.t-desc-item:nth-child(8) .rank {
  background: #24fbbb;
}
.t-desc-item:nth-child(9) .rank {
  background: #07dfff;
}

.t-desc-item:nth-child(1) .value {
  color: rgba(193, 152, 35, 1);
}
.t-desc-item:nth-child(2) .value {
  color: rgba(7, 223, 255, 1);
}
.t-desc-item:nth-child(3) .value {
  color: rgba(202, 118, 49, 1);
}
.t-desc-item:nth-child(4) .value {
  color: rgba(19, 153, 224, 1);
}
.t-desc-item:nth-child(5) .value {
  color: rgba(23, 202, 197, 1);
}
.t-desc-item:nth-child(6) .value {
  color: rgba(152, 120, 94, 1);
}
.t-desc-item:nth-child(7) .value {
  color: rgba(133, 152, 182, 1);
}
.t-desc-item:nth-child(8) .value {
  color: #24fbbb;
}
.t-desc-item:nth-child(9) .value {
  color: #07dfff;
}
.t-desc-item .info {
  width: 130px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: rgba(7, 15, 62, 0.47);
  border: 1px solid #4d6fa7;
  border-radius: 10px;
  font-size: 16px;
  line-height: 24px;
}
.t-desc-item .info .value {
  font-size: 18px;
  font-weight: bold;
}

.sqfwcon {
  width: 90%;
  margin: auto;
  height: 150px;
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
.sqfwcon-item {
  width: 120px;
  height: 100px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: url(~@/assets/image/right2/sqfwcon.png);
  text-align: center;
}
.sqfwcon-item img {
  width: 40px;
  margin-top: 20px;
}
.sqfwcon-item .value {
  color: #fedc85;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
</style>
